<template>
    <div class="big" @click="router">
        <span>
            <i class="el-icon-search"></i>
            {{ title }}
        </span>
    </div>
</template>
<script>
export default ({
    props: {
        title: {
            type: String,
            required: true,
        }
    },
    data() {
        return {}
    },
    methods: {
        router() {
            this.$router.push({ path: 'search' })
        }
    },
    created() {

    }
})
</script>
<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 /10rem)
}

.big {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgb(245, 244, 242);
    border-radius: r(5);

    span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.35rem;
        color: #666;
    }
}
</style>